import React from 'react'
import './shopCar.less'

import { connect } from 'react-redux'
import action from '../../../store/action/index.js'

import * as APIS from "../../../apis/get_apis.js"

import cookies from 'js-cookie'
import { withRouter } from 'react-router-dom'

class ShopCar extends React.Component {
    state = {
        all_price: null,
        number: null,
        car_id: null
    }
    render() {
        let { cardata, countCarNum, getCarData, closeShopCar } = this.props

        return (
            <div className="Shop_car">
                <div className="Shop_car_title">
                    <div style={{ fontSize: '.43rem', fontWeight: '600' }}>已选商品</div>
                    <div onClick={() => {
                        APIS.delCarData({
                            types: "all",
                            user_id: cookies.get('user_id'),
                            car_id: ""
                        }).then(res => {
                            getCarData({
                                user_id: cookies.get('user_id')
                            })

                            closeShopCar()
                        })
                    }} ><i className="iconfont icon-shanchu" style={{ transform: 'scale(0.5)' }} style={{ fontSize: '.13rem', fontWeight: '300' }}></i>清空购物车</div>
                </div>
                <div className="Shop_car_main">
                    {
                        cardata.map((item, index) => {
                            return <div key={item.car_id} className="Shop_car_godds_details_every">
                                <div className="Shop_car_godds_details_every_l">
                                    <img src={item.commodity_images[0]} />
                                </div>
                                <div className="Shop_car_godds_details_every_c">
                                    <div style={{ fontSize: '.43rem', fontWeight: '600', marginBottom: '.1rem' }}>{item.commodity_namer}</div>
                                    <div className="Shop_car_godds_details_every_sapn">
                                        {item.mess}
                                    </div>

                                    <div className="Shop_car_comp">
                                        <div className="Shop_car_minus" ref="Shop_car_minus" onClick={() => {
                                            this.setState({
                                                all_price: ((Number(item.price) * 1000) * (Number(item.number) - 1)) / 1000,
                                                number: Number(item.number) - 1,
                                                car_id: item.car_id
                                            })
                                        }}>-</div>
                                        <div className="Shop_car_num">{item.number}</div>
                                        <div className="Shop_car_add" ref="Shop_car_add" onClick={() => {
                                            this.setState({
                                                all_price: ((Number(item.price) * 1000) * (Number(item.number) + 1)) / 1000,
                                                number: Number(item.number) + 1,
                                                car_id: item.car_id
                                            })
                                        }}>+</div>
                                        <div className="Shop_car_godds_details_every_r">￥{item.all_price}</div>
                                    </div>
                                </div>

                            </div>
                        })
                    }

                </div>
                <div style={{ height: '15vh' }}></div>
            </div>
        )
    }
    componentDidMount() {
        let { getCarData } = this.props
        // 获取购物车数据
        getCarData({
            user_id: cookies.get('user_id')
        });

        // 设置防抖
        [...document.querySelectorAll(".Shop_car_minus")].forEach(item => {
            item.addEventListener("click", this.debounce(this.countCarNum, 200))
        });

        [...document.querySelectorAll(".Shop_car_add")].forEach(item => {
            item.addEventListener("click", this.debounce(this.countCarNum, 200))
        });
    }

    // 点击执行函数
    countCarNum = () => {
        // 点击修改
        APIS.changeCarData({
            all_price: this.state.all_price,
            number: this.state.number,
            car_id: this.state.car_id
        }).then(res => {
            // console.log(res);
            // 删除成功 调取购物车接口
            this.props.getCarData({
                user_id: cookies.get('user_id')
            })

            if (this.state.number < 1) {//删除单条数据
                APIS.delCarData({
                    types: "",
                    user_id: cookies.get('user_id'),
                    car_id: this.state.car_id
                }).then(res => {
                    // 删除成功 调取购物车接口
                    this.props.getCarData({
                        user_id: cookies.get('user_id')
                    })
                    // 如果购物车长度为零 关闭购物弹窗
                })
            }
        })
    }

    debounce = (func, wait) => {
        let time = wait || 200
        let timer;
        return function () {
            clearTimeout(timer);
            timer = setTimeout(() => {
                func()
            }, time)
        }
    }
}
export default connect(state => state.foodf, action.foodf)(withRouter(ShopCar))

